<template>
  <v-app class="h-100">
    <v-container class="pa-0 h-100" fluid>
      <v-row class="h-100" no-gutters>
        <!-- 左侧 Account 信息区域 -->
        <v-col class="overflow-y-auto" cols="auto" style="width: 430px; height: 100vh">
          <account-base />
        </v-col>

        <!-- 中间分割线 -->
        <v-divider class="divider-center" vertical></v-divider>

        <!-- 右侧预留区域 -->
        <v-col class="flex-grow-1 h-100 overflow-y-auto">
          <v-card class="h-100 rounded-0" elevation="0">
            <v-card-text class="pa-6 d-flex align-center justify-center h-100">
              <div class="text-center text-medium-emphasis placeholder-content">
                <v-icon color="grey-lighten-2" :icon="mdiPlusCircleOutline" size="64"></v-icon>
                <p class="text-h6 mt-4">内容区域</p>
                <p class="text-body-2">此区域暂时为空，可用于显示其他相关信息</p>
              </div>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script lang="ts" setup>
import { useSystemStateListener } from '@/composables/useSystemStateListener'
import AccountBase from '@/windows/account/components/account-base.vue'
import { mdiPlusCircleOutline } from '@mdi/js'

// 启动系统状态监听器
useSystemStateListener()
</script>

<style scoped>
/* 中间分割线样式 */
.divider-center {
  border-color: rgba(var(--v-theme-outline), 0.12);
  opacity: 0.6;
}

/* 占位内容样式 */
.placeholder-content {
  transition: opacity 0.3s ease;
}

.placeholder-content:hover {
  opacity: 0.8;
}
</style>
